<template>
  <el-button @click="onCreate" class="create" type="danger"> + {{ createTxt }} </el-button>

  <!-- 云模型创建 -->
  <CloudModelCreate
    v-if="isCloudModel"
    :visible="isCloudModel"
    type="add"
    @close="handleClose"
    :edit-data="cloudEditData"
  />
  <!-- 知识库创建 -->
  <BaseCreated v-if="isKnowledgeBase" :visible="isKnowledgeBase" @close="handleClose" />
  <!-- 语音模型创建 -->
  <DialogSpeechModel v-if="isSpeechModel" :visible="isSpeechModel" @close="handleClose" />
  <!-- 标签创建 -->
  <DialogTagsModel v-if="isTagsModel" :visible="isTagsModel" @close="handleClose" />

  <!-- 生成订单 -->
  <DialogOrdersModel v-if="isOrdersModel" :visible="isOrdersModel" @close="handleClose" />
  <!-- 生成产品 -->
  <DialogProductModel v-if="isProductModel" :visible="isProductModel" @close="handleClose" />
  <!-- 数字人 -->
  <DialogDigitalPeople
    v-if="isDigitalPeople"
    :visible="isDigitalPeople"
    type="add"
    :edit-data="editData"
    @close="handleClose"
  />
  <!-- 添加二维码 -->
  <DialogQrCodeModel v-if="isQrCodeModel" :visible="isQrCodeModel" @close="handleClose" />
</template>
<script lang="ts" setup>
import debounce from "@/utils/debounce"
import Pubsub from "pubsub-js"
import { ref } from "vue"
import BaseCreated from "./components/baseCreated.vue"
import CloudModelCreate, { ModelFormProps } from "./components/cloudModelCreate.vue"
import DialogDigitalPeople from "./components/dialogDigitalPeople.vue"
import DialogOrdersModel from "./components/dialogOrdersModel.vue"
import DialogProductModel from "./components/dialogProductModel.vue"
import DialogSpeechModel from "./components/dialogSpeechModel.vue"
import DialogTagsModel from "./components/dialogTagsModel.vue"
import DialogQrCodeModel from "./components/dialogQrCodeModel.vue"

interface Props {
  type?: string
  createTxt?: string
}

type CloseType = "cloud" | "digital_update_init"

const props = defineProps<Props>()

const sidebarContainer = ref<any>(null)
const isCloudModel = ref<boolean>(false)
const isKnowledgeBase = ref<boolean>(false)
const cloudEditData = ref<ModelFormProps>({} as ModelFormProps)
const editData = ref<any>({})
const isSpeechModel = ref<boolean>(false)
const isTagsModel = ref<boolean>(false)
// const isSpeechClone = ref<boolean>(false)
const isOrdersModel = ref<boolean>(false)
const isProductModel = ref<boolean>(false)
const isDigitalPeople = ref<boolean>(false)
const isQrCodeModel = ref<boolean>(false)

const onCreate = debounce(() => {
  switch (props.type) {
    case "CloudModel": // 云模型
      isCloudModel.value = true
      break
    case "KnowledgeBase": // 知识库
      isKnowledgeBase.value = true
      break
    case "MiddlegroundKey": // 中台key
      // console.log(props.type)
      Pubsub.publish("MIDDLEGROUND_KEY")
      break
    case "SpeechModelList": // 语音模型
      // console.log(props.type)
      isSpeechModel.value = true
      break
    case "Tags": // 标签
      isTagsModel.value = true
      break
    case "Sdk": // sdk
      Pubsub.publish("SDK")
      break
    case "Administrators": // 管理员
      Pubsub.publish("ADMINISTRATORS_DIALOG")
      break
    case "Orders": // 生成订单
      isOrdersModel.value = true
      break
    case "Product": // 产品创建
      isProductModel.value = true
      break
    case "Digital": // 数字人
      isDigitalPeople.value = true
      break
    case "QrCode": // 添加二维码
      isQrCodeModel.value = true
      break
    default:
      break
  }

  sidebarContainer.value = document.querySelector(".sidebar-container")
  sidebarContainer.value.style.zIndex = "9"
}, 300)

const handleClose = (type: CloseType) => {
  isCloudModel.value = false
  isKnowledgeBase.value = false
  isSpeechModel.value = false
  isTagsModel.value = false
  // isSpeechClone.value = false
  isOrdersModel.value = false
  isProductModel.value = false
  isDigitalPeople.value = false
  isQrCodeModel.value = false
  sidebarContainer.value.style.zIndex = "1001"

  if (type) {
    const publish = type === "cloud" ? "UPDATE_MODEL_INIT" : type === "digital_update_init" ? "DIGITAL_UPDATE_INIT" : ""
    Pubsub.publish(publish)
  }
}
</script>

<style lang="scss" scoped>
.create {
  width: 130px;
  height: 40px;
}
</style>
